<!-- 最左边的选择框 -->
<template>
  <div class="card">
    <header>
      <el-popover
        placement="right"
        width="400"
        trigger="click"
      >
        <el-descriptions class="margin-top" :column="2">

          <el-descriptions-item label="昵称">{{ user.username }}</el-descriptions-item>
          <el-descriptions-item label="头像">
            <el-avatar :src="user.img" />
          </el-descriptions-item>

          <el-descriptions-item label="微信号">{{ user.imId }}</el-descriptions-item>
        </el-descriptions>
        <img slot="reference" :src="user.img" class="avatar">
      </el-popover>
    </header>
    <div class="nav-bar" @click="clearSearch">
      <router-link class="icon iconfont icon-msg" to="/home/chat" />
      <router-link class="icon iconfont icon-friend" to="/home/friend" @click.native="getFriendToList" />
      <router-link class="icon iconfont icon-msg" to="/home/groupChat" @click.native="getGroupToList" />
      <router-link class="icon iconfont icon-collection" to="/home/my" />
    </div>
    <footer>
      <i class="icon iconfont icon-more" />
    </footer>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { findFriendBelonging } from '@/api/friendlist/friendList'
import { findGroupBelonging } from '@/api/group'

export default {
  name: 'Card',
  computed: {
    ...mapState([
      'user',
      'groupList'
    ])
  },
  methods: {
    clearSearch() {
      this.$store.dispatch('search', '')
    },
    getFriendToList() {
      findFriendBelonging(this.user.userId)
    },
    getGroupToList() {
      findGroupBelonging(this.user.userId)
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import '../../assets/fonts/iconfont.css'
  .card
    position: relative
    width: 100%
    height: 100%

    .custom-el-badge
      margin-left: 1000px
      margin-top: 10px;
      margin-right: 40px;

    .avatar
      width: 36px
      height: 36px
      margin: 20px 12px 0 12px
      border-radius: 2px

    .nav-bar
      width: 100%
      text-align: center

    .icon
      display: inline-block
      font-size: 26px
      margin-top: 28px
      padding: 0 16px
      box-sizing: border-box
      color: rgb(173, 174, 175)
      opacity: 0.8
      cursor: pointer

      &.active
        color: rgb(0, 220, 65)

      &:hover
        opacity: 1;

    .icon-msg, .icon-more
      font-size: 22px

    .icon-msg
      padding: 0 19px

  footer
    position: absolute
    bottom: 20px
    width: 100%
    text-align: center
</style>
